<!DOCTYPE html>
<html>
<head>
    <title>心形图层遮罩效果</title>
    <link rel="stylesheet" href="./css/ol.css" type="text/css">
    <script src="./js/ol.js"></script>

</head>
<body>
<div id="map" class="map"></div>

<script>
    var osm = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var map = new ol.Map({
        layers: [osm],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });

    //precompose 在层渲染之前触发。事件对象将没有上下文集。
    osm.on('precompose', function(event) {

        var ctx = event.context; //获取到canvas的上下文，该实例会用到canvas绘图的基础知识

        ctx.save(); //保存现场；若不保存，会一次次绘制心形，造成毛边

        var pixelRatio = event.frameState.pixelRatio; //像素密度
        var size = map.getSize(); //地图尺寸
        //canvas初始绘图位置是左上角，需要把绘制位置移动到屏幕的某一点位置再开始绘图
        // 平移
        ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
        //缩放
        ctx.scale(3 * pixelRatio, 3 * pixelRatio);
        //平移
        ctx.translate(-75, -80);

        //绘制心形路径
        ctx.beginPath();
        ctx.moveTo(75, 40);
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);

        ctx.clip(); //将canvas所有内容显示在绘制的边界中间
        ctx.translate(75, 80);
        ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio);
        ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
    });

    //postcompose 在所有层渲染后触发。事件对象将没有上下文集。
    osm.on('postcompose', function(event) {
        var ctx = event.context;
        ctx.restore(); //恢复保存的上下文现场
    });
</script>
</body>
</html>